<template>
	<div v-for="(item, index) in fileList" :key="index">
		<img :src="item.url" alt="" />
	</div>
	<el-upload
		v-model:file-list="fileList"
		class="upload-demo"
		multiple
		:auto-upload="false"
		:on-preview="handlePreview"
		:on-remove="handleRemove"
		list-type="picture-card"
		accept="image/*"
	>
		<el-icon><Plus /></el-icon>
		<template #file="{ file }">
			<!-- class="el-upload-list__item-thumbnail" -->
			<img :src="file.url" alt="" />
		</template>
	</el-upload>
</template>

<script lang="ts" setup>
import { ref } from "vue";

import { ElUpload, ElIcon, UploadProps, UploadUserFile } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

const fileList = ref<UploadUserFile[]>([]);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
	console.log(uploadFile, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (file) => {
	console.log(file);
};
</script>
